.projectimg:hover 
    { 
    transform: scale(1.1);
    transition: 1s;
    }

@media (max-width: 500px)
    {
        body {
            background-color:rgb(97, 176, 181);
            
        }
        
          
          
        #Anthony {
            display:flex;
            justify-content:flex-end;
             
            height:100px;
            width: 150px;
            border-style: double;
            border-color: rgb(97, 176, 181);
            border-width: 5px;
            border-radius:50%; 
            
            position:fixed;
            top: 90%;
            left: 80%;
            transform: translate(-50%, -50%);   
            right: 0;
            bottom: 0;
            
            /* thank you VScode emmet, this worked out exactly how I settled for it. All the way to the right of the viewer in the center */

            
            transform: translate(-50%, -50%);
            transition: opacity 1, ease-in-out 15s;
            opacity: 1;
            z-index: -1;
        }
            /* Fully on the fence if I prefer leaving it callously behind all other elements on the page, or if I prefer the hover. So we enjoy both while I find new and creative ways to make my picture go away. */
        
        
    }


@media (min-width: 501px)
    {
        body {
            background-color:rgb(97, 176, 181);
            background-image: url("washingtonstuff.jpg");
            background-size:cover;
            background-attachment: fixed;
            background-position: center;
            z-index: -1;

        h2, h3, p, ul, li, .title {
            color: rgb(255, 192, 169);
        }
        /* grabbing multiple above, for some reason only found this out today. */
        h1 {
            color:black;
            text-shadow: 2px 2px 6px grey;
        }
        .footer {
            color: black; 
        }
           
        .ketchup {
            border-style:double;
            border-width: 5px;
            border-color: rgb(97, 176, 181);
            color: black;
            text-shadow: 2px 2px 6px grey;
            background:rgba(255,192,169,1);
        }
        .Smartypants {
            border-style:double;
            border-width: 5px;
            border-color: rgb(97, 176, 181);
            
            color: black;
            text-shadow: 2px 2px 6px grey;
            background:rgba(255,192,169,1);
        }
    
    }
}       
    

ul
    {
        list-style-type: style-none;
        font-size:1.5em;
    }
#Anthony
    {
        display:flex;
        justify-content:left;
        border-style: double;
        border-color: rgb(97, 176, 181);
        border-width: 5px;
        border-radius:50%;
    }
.contact 
    {
        display:flex;
        flex-direction:row;
        gap:1em;
    }

.contact
    {
        display:flex;
        background: rgb(63,94,251);
        background: radial-gradient(circle, rgba(255,192,169,1) 20%, rgba(97,176,181,0) 100%);
        list-style-type: none;
        justify-content:right;
        font-size:1rem;
        border-color: rgb(97, 176, 181);
        border-style:double;
        border-width: 10px;
    }

/* body
    {
        background-color:rgb(97, 176, 181);
    } */

hr
    {
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, rgba(255,192,169,1) 20%, rgba(97,176,181,0));
        margin: 0 auto;
        width: 50%;
    }


h1
    {
        text-align: center;
        font-size: 4em;
        background: radial-gradient(circle, rgba(255,192,169,1) 20%, rgba(97,176,181,0) 100%);
        border-color: rgb(97, 176, 181);
        border-style:double;
        border-width: 10px;
    }

h2  {
    font-size:
        3em;
    }
h3  {
    font-size:
        2em;
    }

a:hover
    {
        color:black;
        text-decoration:underline;
    }
    
    
a
    {text-decoration:none;

    }

table
    {
        border:5px solid black;
        border-radius: 10px;
        border-style: double;
        background-color: rgb(255, 192, 169);
        margin: 0 auto;
        width: 50%;
        font-size: 1em;
        text-align: center;
    }
   

#project-name
    {font-size:2em;}
#project-name2
    {font-size:2em;}
   
p
    {
        text-align: center;
    }

.byte
    {
        font-family:bytesized, sans-serif;
    }

.ketchup
    {
        color: red;
        font-size:20px;
        text-shadow: 2px 2px 6px yellow;
        width:400px;
    }
.Smartypants
    {
        color: black;
        font-size:20px;
        text-shadow: 2px 2px 6px yellow;
        width:400px;
    }

    
input
    {
        background-color: rgb(97, 176, 181);
    }
input:focus
    {
        background-color: rgb(255, 255, 255);
    }
#submit
    {
        background-color:white;
    }
.footer
    {
        font-family: "Winky Sans", sans-serif;
        background: radial-gradient(circle, rgba(255,192,169,1) 20%, rgba(97,176,181,0) 100%);
        border-color: rgb(97, 176, 181);
            border-style:double;
            border-width: 10px;
    }

.projectimg
    {
        width: 300px;
        height: 300px;
        border-radius: 10%;
        margin: 0 auto;
    }

.Projects
    {
        display:flex;
        width:75%;
        margin: 0 auto;
        justify-content:space-between;
        align-items:flex-start;
        flex-wrap:wrap;
        
    }
.Projects2
    {
        display:flex;
        width:75%;
        margin: 0 auto;
        justify-content:space-between;
        align-items:flex-start;
        flex-wrap:wrap;
        
    }

.contact-form 
    {display:flex;
        flex-direction:row;
        
        align-items:flex-start;
        gap:1em;
        width:50%;
        padding-top:15px;
    }